import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { Button, Modal, FormControl } from 'tinper-bee';
import './index.less';

export default class SearchListItem extends Component{
  constructor(props){
    super(props);
    this.state = {
        data: this.props.data,
        show: this.props.data.length ? true : false,
        value: this.props.defaultValue ? this.props.defaultValue : '',
        placeholder: this.props.placeholder ? this.props.placeholder :'输入企业名称关键词',
        showTotalNumber: this.props.showTotalNumber ? this.props.showTotalNumber : false
    }
  }
  componentWillReceiveProps (nextProps) {
    if(nextProps.data != this.state.data){
      this.setState({
        data: nextProps.data,
        show: nextProps.data.length ? true : false,
        value: nextProps.defaultValue ? nextProps.defaultValue : ''
      });
    }else{
      this.setState({
        value: nextProps.defaultValue ? nextProps.defaultValue : ''
      });
    }
  }
  handlerChange = (e) => {
    let onChange = this.props.onChange;
    onChange(e.target.value);
    this.setState({
      value: e.target.value
    });
  }
  handlerChoose = (item) => {
    this.setState({
      show: false,
      value: item.name
    });
    let onChoose = this.props.onChoose;
    onChoose(item);
  }
  handlerFocus = () => {
    let onFocus = this.props.onFocus;
    if(onFocus){
      onFocus();
    }
  }
  handlerBlur = () => {
    let onBlur = this.props.onBlur;
    if(onBlur){
      onBlur();
    }
  }
  render(){
    let _me = this;
  	return(
        <div className="u-autocomplete">
    			<FormControl value={this.state.value}
                                 onChange={this.handlerChange}
                                 onFocus={this.handlerFocus}
                                 onBlur={this.handlerBlur}
                                 placeholder={this.state.placeholder}/>
          {this.state.showTotalNumber && <p className="show-number">团队成员：{this.state.data.length}人</p>}
          {this.state.show && <ul>
            {
              this.state.data.map(function(item, index){
                return <li title={item.name} onClick={()=>_me.handlerChoose(item)}>{item.name}</li>
              })
            }
          </ul>}
        </div>
  		)
  }
}

SearchListItem.PropTypes = {

}